{% load mkrange %}

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    
    <head>
        <title>htmock</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="{{ MEDIA_URL }}styles.css" type="text/css">
        <link rel="stylesheet" type="text/css"
              href="{{ MEDIA_URL }}jquery-ui-theme/jquery-ui-1.8.8.custom.css">
        <script type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
        <script type="text/javascript"
                src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
        <script type="text/javascript" src="{{ MEDIA_URL }}util.js"></script>
        <script type="text/javascript" src="{{ MEDIA_URL }}index-ui-data.js"></script>
        <script type="text/javascript" src="{{ MEDIA_URL }}index-ui.js"></script>
    </head>
    
    <body>
        <h1>htmock</h1>
        {% if resources.count > 0 %}
            <h2>Current resources</h2>
            <table>
                <thead>
                    <tr>
                        <th>Resource</th>
                        <th>Alive until</th>
                        <th>Hit count</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for resource in resources %}
                    {% url inspect-resource resource.label as inspect_url %}
                    {% url mock resource.label as mock_url %}
                        <tr>
                            <td>
                                <a href="{{ mock_url }}">{{ resource.label }}</a>
                            </td>
                            <td>
                                {{ resource.alive_until|date:"Y-m-d H:i" }}
                            </td>
                            <td class="centered">
                                {% with resource.requests.count as n %}
                                    <a href="{{ inspect_url }}">
                                        {{ n }} hit{{ n|pluralize }}</a>
                                {% endwith %}
                            </td>
                            <td class="action">
                                <form action="{{ inspect_url }}" method="post">
                                    <div>
                                        <input type="hidden"
                                            name="X-HTTP-Method-Override"
                                            value="DELETE">
                                        <input type="submit" value="Delete">
                                    </div>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
        
        <h2>Create mock resource</h2>
        <form action="{% url inspect-index %}" method="post" id="create_form">
            <p>
                <label for="label_field">Label:</label>
                <input type="text" name="label" id="label_field">
            </p>
            <p class="hint">
                <label for="label_field">
                    Will be part of the URL. Leave blank for random.
                </label>
            </p>
            <p>
                <label for="ttl_field">Time to live (hours):</label>
                <input type="text" name="ttl" id="ttl_field" value="3"
                       class="num-field">
            </p>
            <p>
                <label for="status_field">Response status:</label>
                <select name="status" id="status_field">
                    <optgroup label="Informational">
                        <option value="100">100 Continue</option>
                        <option value="101">101 Switching Protocols</option>
                    </optgroup>
                    <optgroup label="Successful">
                        <option value="200" selected>200 OK</option>
                        <option value="201">201 Created</option>
                        <option value="202">202 Accepted</option>
                        <option value="203">203 Non-Authoritative Information</option>
                        <option value="204">204 No Content</option>
                        <option value="205">205 Reset Content</option>
                        <option value="206">206 Partial Content</option>
                    </optgroup>
                    <optgroup label="Redirection">
                        <option value="300">300 Multiple Choices</option>
                        <option value="301">301 Moved Permanently</option>
                        <option value="302">302 Found</option>
                        <option value="303">303 See Other</option>
                        <option value="304">304 Not Modified</option>
                        <option value="305">305 Use Proxy</option>
                        <option value="307">307 Temporary Redirect</option>
                    </optgroup>
                    <optgroup label="Client error">
                        <option value="400">400 Bad Request</option>
                        <option value="401">401 Unauthorized</option>
                        <option value="402">402 Payment Required</option>
                        <option value="403">403 Forbidden</option>
                        <option value="404">404 Not Found</option>
                        <option value="405">405 Method Not Allowed</option>
                        <option value="406">406 Not Acceptable</option>
                        <option value="407">407 Proxy Authentication Required</option>
                        <option value="408">408 Request Timeout</option>
                        <option value="409">409 Conflict</option>
                        <option value="410">410 Gone</option>
                        <option value="411">411 Length Required</option>
                        <option value="412">412 Precondition Failed</option>
                        <option value="413">413 Request Entity Too Large</option>
                        <option value="414">414 Request-URI Too Long</option>
                        <option value="415">415 Unsupported Media Type</option>
                        <option value="416">416 Requested Range Not Satisfiable</option>
                        <option value="417">417 Expectation Failed</option>
                    </optgroup>
                    <optgroup label="Server error">
                        <option value="500">500 Internal Server Error</option>
                        <option value="501">501 Not Implemented</option>
                        <option value="502">502 Bad Gateway</option>
                        <option value="503">503 Service Unavailable</option>
                        <option value="504">504 Gateway Timeout</option>
                        <option value="505">505 HTTP Version Not Supported</option>
                    </optgroup>
                    <option value="0">custom code</option>
                </select>
                <input type="text" name="custom_status" class="int-field"
                       id="custom_status_field">
            </p>
            <fieldset>
                <legend>Headers</legend>
                <table id="headers-table">
                    <tbody>
                        {% mkrange 5 as range %}
                        {% for i in range %}
                            <tr id="header_row_{{i}}">
                                <td>
                                    <input type="text" id="header_field_{{i}}" name="header{{i}}">
                                </td>
                                <td>
                                    <input type="text" id="value_field_{{i}}" name="value{{i}}">
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <input type="hidden" name="max_header" value="4"
                       id="max_header_field">
            </fieldset>
            <fieldset>
                <legend>Entity body</legend>
                <p class="hint">
                    Content-Length will be supplied by the server.
                </p>
                <p>
                    <textarea name="body" cols="60" rows="10"
                              id="body_field"></textarea>
                </p>
            </fieldset>
            <p><input type="submit" value="Create"></p>
        </form>
    </body>
    
</html>
